<template>
	<div class="guide-rd">
		<div class="bg"></div>
		<div class="banner">
			<swiper :options="swiperOption" class="swiper-box" ref="indexSwiper">
				<swiper-slide v-if="!indexSwipe">
					<img :src="preview" class="swipe-img" style="width:100%">
				</swiper-slide>
				<swiper-slide v-for="(data,index) in indexSwipe" :key="index" v-else="indexSwipe">
					<router-link :to="'data.rel_url'" v-if="data.rel_url">
						<img :src="BASE_URL+data.icon" class="swipe-img" :alt="data.title" style="width:100%">
					</router-link>
					<img :src="BASE_URL+data.icon" :alt="data.title" class="swipe-img" v-else style="width:100%">
				</swiper-slide>
			    <div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<nav class="guide-nav box-row">
			<router-link :to="'/newuser'" class="flex-1">
				<span class="icon-box"><i class="icon icon-new"></i></span>
				<p>新人专区</p>
			</router-link>
			<router-link :to="'/riskwarn'" class="flex-1">
				<span class="icon-box"><i class="icon icon-dangour"></i></span>
				<p>风险提示</p>
			</router-link>
			<router-link :to="'/datareport'" class="flex-1">
				<span class="icon-box"><i class="icon icon-data"></i></span>
				<p>数据披露</p>
			</router-link>
			<a href="javascript:;" @click="sponsorB" class="flex-1">
				<span class="icon-box"><i class="icon icon-do"></i></span>
				<p>发起项目</p>
			</a>
		</nav>
		<div class="static-banner"></div>
		<div class="flow-title ofH">
			<span class="fl">消费众筹</span>
			<router-link class="fr gray h-arrow font12" tag="span" :to="{path:'/search',query:{type: 'xf'}}">查看更多 </router-link>
		</div>
		<div class="customer mt5">
			<ul class="customer-wrap ofH">
				<li class="customer-item" v-for="(item,index) in xfData" :class="{'customer-item__main': index == 1}" >
					<div class="customer-item__bg" :style="{backgroundImage:'url('+BASE_URL+(item.deal_wap_image?item.deal_wap_image:item.image)+')'}">
						<router-link :to="{path:'/productDetail',query: {id: item.id}}" style="width:100%;height:3.4rem;display: inline-block;">
						<div class="customer-info">
							<p class="customer-name slh">{{item.name}}</p>
							<div class="customer-address slh">
								<i class="icon"></i>{{item.province}}-{{item.city}}
							</div>
						</div>
					</router-link>
					</div>
					
				</li>
			</ul>
		</div>
		<div class="flow-title mt20 ofH">
			<span class="fl">往期合辑</span>
			<router-link class="fr gray h-arrow font12" tag="span" :to="'/succase'">查看更多 </router-link>
		</div>
		<div class="cate box-row mt10">
			<router-link :to="'/succase'" class="cate-item all flex-1">全部项目</router-link>
			<router-link :to="{path:'/succase',query:{type:'fast'}}" class="cate-item fast flex-1">筹集最快</router-link>
			<router-link :to="'/succase'" class="cate-item select flex-1">全球精选</router-link>
			<router-link :to="{path:'/succase',query:{type:'hot'}}" class="cate-item hot flex-1">人气爆款</router-link>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.guide-rd{
		overflow: hidden;
		background: #ffffff;
		padding-bottom: 96px;
	}
	.flow-title{
		font-size: 16px;
		font-weight: bold;
		padding: 0 a(30px);
		@include lh(44px);
	}
	.bg{
		position:relative;
		overflow: hidden;
		width: 100%;
		height: a(330px);
		&:after{
			content: '';
			position: absolute;
			top: -6rem;
			left: -5rem;
			width: 20rem;
			height: 10rem;
		  	border-radius: 50%;
		  	background-image: -webkit-linear-gradient( 180deg, rgb(95,138,255) 20%, rgb(84,155,248) 30%, rgb(73,171,241) 41%, rgb(58,207,171) 65%);
		}
	}
	.banner{
		position: absolute;
		top: a(80px);
		left: a(30px);
		right: a(30px);
		height: a(320px);
		border-radius: 10px;
	}
	.swiper-box{
		width: 100%;
		height: 100%;
		border-radius: 10px;
		img{width: 100%;height: 100%;}
	}
	.guide-nav{
		margin-top: a(130px);
		text-align: center;
		.icon-box{
			display: inline-block;
			height: a(80px);
			.icon-new{
				@include bg("~__assets/images/icon/guide-nav-new.png",a(50px),a(56px));
			}
			.icon-dangour{
				@include bg("~__assets/images/icon/guide-nav-dangour.png",a(53px),a(62px));
			}
			.icon-data{
				@include bg("~__assets/images/icon/guide-nav-data.png",a(57px),a(57px));
			}
			.icon-do{
				@include bg("~__assets/images/icon/guide-nav-do.png",a(49px),a(57px));
			}
		}
	}
	.static-banner{
		margin: a(40px) a(30px) a(80px);
		height: a(136px);
		background: url("../../static/images/guide-static-banner.png");
		background-size: 100% 100%;
	}
	.divider{
		text-align: center;
		span{
			font-size: a(36px);
			position: relative;

			&:before{
				content: '';
				display: inline-block;
				@include bg("~__assets/images/icon/divider.png",34px,5px);
				position: absolute;
				top: 50%;
				left: -65%;
				margin-top: -3px;
			}
			&:after{
				content: '';
				display: inline-block;
				@include bg("~__assets/images/icon/divider.png",34px,5px);
				position: absolute;
				top: 50%;
				right: -65%;
				margin-top: -3px;
				transform: rotate(180deg);
			}
		}
	}
	.customer{
		position: relative;
		padding: 0 a(30px);
	}
	.customer-item{
		display: inline-block;
		float: left;
		margin-right: a(10px);
		margin-top: a(10px);
		&:nth-child(2){
			margin-right: 0;
		}
		&:nth-child(5){
			margin-right: 0;
		}
		&.customer-item__main{
			width: a(456px);
			background-size: 100% 100%;
    		background-repeat: no-repeat;
		}

		position: relative;
		width: a(222px);
		height: a(255px);
		border-radius: 5px;
		overflow: hidden;

		.customer-item__bg{
			width:100%;
		    height:0;
		    padding-bottom: a(255px);
		    overflow:hidden;
		    background-position: center center;
		    background-repeat: no-repeat;
		    -webkit-background-size:cover;
		    -moz-background-size:cover;
		    background-size:cover;
		}
		.customer-info{
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			overflow: hidden;
			height: a(85px);
			z-index: 1;
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), to(rgba(102, 102, 102, 0.7)));
    		background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0, rgba(102, 102, 102, 0.7) 100%);

			.customer-name{color: #ffffff;position:relative;z-index:3;margin: 5px 7px 0;font-size: a(26px);}
			.customer-address{
				i{@include bg('~__assets/images/icon/iconfont-address-2.png',a(17px),a(24px));margin-right: 4px;vertical-align: middle;}
				color: #ffffff;position:relative;z-index:3;margin: 2px 7px;font-size: a(20px);}
			
			.gs1{
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 2;
				background-position:center;
				filter: blur(7px);
			}
		}
	}
	.cate{
		padding: 0 a(30px);
	}
	.cate-item{
		@include lh(a(270px));
		text-align: center;
		margin-right: a(10px);
		&:last-child{margin-right: 0;}
		color: #ffffff;
		font-size: 13px;
		border-radius:5px;
		@each $i in all,fast,select,hot{
			&.#{$i}{
				@include bg("../../static/images/guide-#{$i}.jpg",100%,100%);
			}
		} 
	}
</style>
<style lang="scss">
	.guide-rd .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
		left: auto !important;
		right: 0 !important;
		width: 30% !important;
	}
	.guide-rd .swiper-pagination-bullet {
		background: #fff !important;
	}
	.guide-rd .swiper-pagination-bullet-active{
		background: #fff !important;
	}
</style>

<script>
	import 'swiper/dist/css/swiper.css'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	import preview from '__assets/images/preview.jpg'
	import store from '@/store/index';
	import {getGuide} from '__api'
	export default{
		name: 'guide-view',
		components: {
		    swiper,
		    swiperSlide
		},
		computed:{
			swiper(){
				return this.$refs.mySwiper.swiper
			}
		},
		created(){
			this.getGuideData();
		},
		data(){
			return{
				xfData:[],
				preview:preview,
				indexSwipe:[],
				user:store.state.user,
				swiperOption: {
					loop:true,
					autoplay:true,
					pagination: {
			              el: '.swiper-pagination',
			              clickable :true
			          },
					slidesPerView: 1,
					paginationClickable: true,
		        }
			}
		},
		methods: {
			getGuideData(){
				getGuide().then( res => {
					this.indexSwipe = this.indexSwipe.concat(res.article_list);
					 res.deal_list.length = 5;
					this.xfData = res.deal_list;
				})
			},
			sponsorB(){
				if(!this.user.loginStatus){
					this.$router.push({path:'/login'})
					return;
				}
				if(this.user.user.investor_status == 0){
					this.$router.push({path:'/userauth'})
					return;
				}
				this.$router.push({path:'/sponsor'})
			}
		}
	};
</script>